<template>
  <!-- 添加应用 -->
  <div>
    <!-- 内容主体区域 -->
    <dtDialog :title="title" :visible.sync="visible" :is-loading="loading" :comfirmLabel="comfirmLabel" :width="width" @closeDialog="handleClose" @comfirmBtn="onSubmit()">
      <div slot="content">
        <slot name="append"></slot>
        <el-form ref="formRef" :model="formData" :inline="!!isInline" :label-width="labelWidth" :label-position="labelPosition">
          <template v-for="item in formDesignList">
            <template v-if="(!!item.showTypes && item.showTypes.includes(dialogType)) || !item.showTypes">
              <mapView v-if="!!visible && !!isNeedSubmit && item.label === '经度'" @getMapDot="getMapDot" style="margin-bottom: 10px;" />
              <el-form-item :label="item.label" :prop="item.prop" :rules="['detail'].includes(dialogType) ? [] : item.rules">
                <FormTemplate :form-item="{...item, readonly: !isNeedSubmit || item.readonly, visible}" v-model="formData[item.prop]"/>
              </el-form-item>
            </template>
          </template>
        </el-form>
        <slot name="other"></slot>
      </div>
    </dtDialog>
  </div>
</template>
<script>
import mapView from "@/views/investment/components/MapContainer"
import FormTemplate from './FormTemplate'
export default {
  name: 'DialogForm',
  components: {
    FormTemplate,
    mapView
  },
  props: {
    isInline: Boolean,
    width: {
      type: String,
      default: '800px'
    },
    labelWidth: {
      type: String,
      default: '85px'
    },
    labelPosition: {
      type: String,
      default: 'left'
    },
    formDesignList: Array,
    otherParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogType: 'add',
      visible: false,
      formData: {},
      handleSubmitApi: null,
      loading: false,
      isNeedSubmit: true, // 是否需要提单表单
      LngLatKey: { lng: '', lat: '' }
    }
  },
  watch: {
    formData: {
      handler(val){
        try {
          this.$parent.getFormData(val)
        }catch (e){}
      },
      deep: true
    }
  },
  computed:{
    title(){
      let text = ''
      switch (this.dialogType) {
        case "add":
          text = '新建'
          break;
        case "update":
          text = '编辑'
          break;
        case "detail":
          text = '详情'
          break;
        case "review":
          text = '审核'
          break;
        case "changeState":
          text = '状态变更'
          break;
      }
      return text
    },
    comfirmLabel(){
      let text = ''
      switch (this.dialogType) {
        case "detail":
          text = '确定'
          break;
        default:
          text = '保存'
      }
      return text
    }
  },
  methods: {
    open(type, handleSubmitApi, obj = {}, isNeedSubmit = true) {
      try{
        this.$parent.MX_dialogType = type
      }catch (e){}
      this.dialogType = type
      this.handleSubmitApi = handleSubmitApi
      this.visible = true
      this.isNeedSubmit = isNeedSubmit

      this.$nextTick(() => {
        let formData = JSON.parse(JSON.stringify(obj))
        this.formDesignList.map(v => {
          if (v.type === 'file'){
            v.callBack = (info) => {
              if (!!v.limit && v.limit > 1){
                this.formData[v.prop] = !!this.formData[v.prop].length ? this.formData[v.prop].push(info.fileUrl) : [info.fileUrl]
              }else {
                this.formData[v.prop] = info.fileUrl
              }
            }
          }
          if (!!['add'].includes(this.dialogType) && !Object.keys(formData).includes(v.prop)) {
            formData[v.prop] = Object.keys(v).includes('defaultVal') ? v.defaultVal : ''
          }
          if (v.label === '经度') this.LngLatKey.lng = v.prop
          if (v.label === '纬度') this.LngLatKey.lat = v.prop
        })
        this.formData = JSON.parse(JSON.stringify(formData))
      })
    },
    onSubmit() {
      if (!this.isNeedSubmit) {
        this.handleClose()
        return
      }
      this.$refs.formRef.validate((valid) => {
        let otherParamsCheckFlag = true
        try{
          otherParamsCheckFlag = this.$parent.otherParamsCheck()
        }catch (e){}
        if (valid && otherParamsCheckFlag) {
          this.loading = true
          this.handleSubmitApi({...this.formData, ...this.otherParams})
            .then((res) => {
              if (res.code == '00000') {
                this.loading = false
                this.$parent.$_handleSubmitClose(this.dialogType, ['update'].includes(this.dialogType) ? this.formData : '')
                this.$message.success(`${this.title}成功`)
                this.handleClose()
              }
            })
            .catch(res => {
              this.$message.error(`${this.title}失败`)
              // this.visible = false
              this.loading = false
            })
        }
      })
    },
    handleClose() {
      // 清空数据关闭页面
      this.$refs.formRef.clearValidate()
      this.visible = false
      this.formData = {}
    },
    getMapDot(e){
      this.$set(this.formData, this.LngLatKey.lng, e.lng)
      this.$set(this.formData, this.LngLatKey.lat, e.lat)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
